<template>
  <el-container>
    <el-aside v-show="widthInfo" width="217px" style="background-color: #FFFFFF;overflow-y: hidden">
      <div class="asode_sty">
        <h2>springBoot</h2>
      </div>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>客户模块</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1">
              <router-link :to="{path:'/customer'}">
                客户池
              </router-link>
            </el-menu-item>
            <el-menu-item index="1-2">
              <router-link :to="{path:'/stomeradd'}">
                客户池1
              </router-link>
            </el-menu-item>

            <el-menu-item index="1-3">
              <router-link :to="{path:'/culuechi'}">
                客户池2
              </router-link>
            </el-menu-item>

            <el-menu-item index="1-4">
              <router-link :to="{path:'/cumergerecord'}">
                客户池2
              </router-link>
            </el-menu-item>

            <el-menu-item index="1-5">
              <router-link :to="{path:'/customermerge'}">
                客户池2
              </router-link>
            </el-menu-item>

            <el-menu-item index="1-6">
              <router-link :to="{path:'/customerview'}">
                客户池2
              </router-link>
            </el-menu-item>

            <el-menu-item index="1-7">
              <router-link :to="{path:'/check'}">
                客户池2
              </router-link>
            </el-menu-item>


            <el-menu-item index="1-8">
              <router-link :to="{path:'/dispose'}">
                客户池2log
              </router-link>
            </el-menu-item>

            <el-menu-item index="1-8">
              <router-link :to="{path:'/log'}">
               CuLog
              </router-link>
            </el-menu-item>

          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>售前模块</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1">
              <router-link :to="{path:'/business'}">
                售前商机管理
              </router-link>
            </el-menu-item>
            <el-menu-item index="2-2">
              <router-link :to="{path:'/addbusiness'}">
                新增商机
              </router-link>
            </el-menu-item>

            <el-menu-item index="2-3">
              <router-link :to="{path:'/salesfunnel'}">
                salesfunnel
              </router-link>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>售中模块</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="3-1">
              <router-link :to="{path:'/contractpage'}">
                合同
              </router-link>
            </el-menu-item>
            <el-menu-item index="3-2">
              <router-link :to="{path:'/demopage'}">
                订单详情界面
              </router-link>
            </el-menu-item>

            <el-menu-item index="3-3">
              <router-link :to="{path:'/ordepage'}">
                订单
              </router-link>
            </el-menu-item>

            <el-menu-item index="3-4">
              <router-link :to="{path:'/csdemo'}">
                新增订单
              </router-link>
            </el-menu-item>
            <el-menu-item index="3-5">
              <router-link :to="{path:'/demopages'}">
                demopage_2
              </router-link>
            </el-menu-item>

            <el-menu-item index="3-6">
              <router-link :to="{path:'/contrantview'}">
                合同视图datevie
              </router-link>
            </el-menu-item>


            <el-menu-item index="3-6">
              <router-link :to="{path:'/datevie'}">
                datevie
              </router-link>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>


        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>售后模块</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="4-1">
              <router-link :to="{path:'/tain'}">
                维修工单
              </router-link>
            </el-menu-item>
            <el-menu-item index="4-2">
              <router-link :to="{path:'/order'}">
                新增工单
              </router-link>
            </el-menu-item>

            <el-menu-item index="4-3">
              <router-link :to="{path:'/purh'}">
                重复购买
              </router-link>
            </el-menu-item>

            <el-menu-item index="4-4">
              <router-link :to="{path:'/serv'}">
                客服主页
              </router-link>
            </el-menu-item>

            <el-menu-item index="4-5">
              <router-link :to="{path:'/arse'}">
                QA武器库
              </router-link>
            </el-menu-item>

            <el-menu-item index="4-6">
              <router-link :to="{path:'/plan'}">
                投诉管理
              </router-link>
            </el-menu-item>


            <el-menu-item index="4-7">
              <router-link :to="{path:'/exps'}">
                销售费用
              </router-link>
            </el-menu-item>

            <el-menu-item index="4-8">
              <router-link :to="{path:'/evet'}">
                出差管理
              </router-link>
            </el-menu-item>

            <el-menu-item index="4-9">
              <router-link :to="{path:'/part'}">
                出差管理详情
              </router-link>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>产品模块</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="5-1">
              <router-link :to="{path:'/product'}">
                产品
              </router-link>
            </el-menu-item>

            <el-menu-item index="5-2">
              <router-link :to="{path:'/addProduct'}">
                新增产品
              </router-link>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>


        <el-menu-item index="6">
          <i class="el-icon-menu"></i>
          <router-link :to="{path:'/permissions'}">
            权限界面
          </router-link>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header height="67px" style="background-color: #009EFB">
        <el-row>
          <el-col :span="4"><div class="grid-content bg-purple-dark">
            <i class="el-icon-menu" style="margin:30px 0 0 0;" @click="widthInfo=!widthInfo"></i>
          </div></el-col>
          <el-col :span="4"><div class="grid-content bg-purple-dark">
            <el-input
              placeholder="请输入内容"
              v-model="input10"
              clearable style="padding: 15px 0 0 0">
            </el-input>

          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple-dark"></div></el-col>
          <el-col :span="4"><div class="grid-content bg-purple-dark">
            <a href="">
              <div style=" border:1px solid #FFFFFF; width:30px; height: 30px;  float: left;margin:20px 0 0 46px ; border-radius: 100px">

              </div>
              <p style="position:absolute;float : left;margin:26px 0px 0 85px">黄添鑫</p>
            </a>
          </div></el-col>
        </el-row>
      </el-header>
      <el-main>
        <router-view >
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>


<script>
  export default {
    name: 'SpringBootHometPage',
    data() {
      return {
        input10: '',
        widthInfo:true
      }
    },
    methods:{
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      scaling(){
        if(this.widthInfo==true){
          this.widthInfo=false;
        }
        this.widthInfo=true;
      }
    }
  }
</script>

<style scoped>
  router-link{
    text-decoration: none;
  }
  .asode_sty{
    border: 1px solid #009EFB;
    border-left: #FFFFFF;
    width: 99%;
    height: 65px;
    background-color: #009EFB;
  }
  .asode_sty h1{
    padding:1px 1px 1px 55px  ;
  }
  .router-view{
    border: 1px solid darkslategrey;
    width:99.7% ;
    height:99.7%;
  }
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
  }

  body > .el-container {

  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {

  }

  .el-container:nth-child(7) .el-aside {

  }
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #009EFB;
  }
  .bg-purple {
    background: #009EFB;
  }
  .bg-purple-light {
    background: #009EFB;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 67px;
  }
  .row-bg {

    background-color: #009EFB;
  }
</style>

